import React, { useEffect, useState } from 'react';
import { Drawer, Form, Input, Space, Button, Popconfirm, Select, message } from 'antd';
import ComTree from './ComTree';
import { addProductType, updateProductType } from '../../../apis/productType';
const { Option } = Select;


type Props = {
    closeModal: (closeType?: string) => void,
    updateCol: any
}

const AddAndUpdate = ({ closeModal, updateCol }: Props) => {

    const [form] = Form.useForm();
    const [title, setTitle] = useState('')
    const [pid, setPid] = useState('')

    useEffect(() => {
        if (updateCol) {
            setTitle('修改')
            form.setFieldsValue(updateCol)
        } else {
            setTitle('新增')
        }

    }, [updateCol])



    //提交
    const submitDate = async () => {
        const formData = form.getFieldsValue()
        if (updateCol) {
            //修改
            const data = { ...formData, status: formData.status == '停用' ? '2' : '1', name: formData.title, id: updateCol.id, pid }
            for (const key in data) {
                if (!data[key]) {
                    message.error(`请填写${key}`)
                    return
                }
            }
            await updateProductType(data)
        } else {
            //新增
            const data: any = { name: formData.title, status: 7, pid }
            for (const key in data) {
                if (!data[key]) {
                    message.error(`请填写${key}`)
                    return
                }
            }
            await addProductType(data)
        }
        closeModal('sub')
    }

    //取消提示框
    const confirm = () => {
        closeModal()
    };
    //修改上级商品类型
    const changePid = (pid: string) => {
        setPid(pid)
    }

    return (
        <>
            <Drawer title={title}
                open={true}
                closable={false}
                footer={
                    <Space>
                        <Popconfirm
                            title="确定放弃编辑?"
                            onConfirm={confirm}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button>取消</Button>
                        </Popconfirm>
                        <Button type="primary" onClick={submitDate}>
                            提交
                        </Button>
                    </Space>
                }
                footerStyle={{ textAlign: 'right' }}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    form={form}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item label="商品类型名称" name="title"
                        wrapperCol={{ span: 11 }}
                        rules={[{ required: true, message: '请输入商品类型名!' }]}>
                        <Input type='text' />
                    </Form.Item>
                    {title === '修改' && (
                        <Form.Item label="商品类型状态" name="status"
                            wrapperCol={{ span: 11 }}
                            rules={[{ required: true, }]}>
                            <Select className='r-Fitem ' placeholder='请选择状态' style={{ width: '200px' }}
                                allowClear={true}>
                                <Option value='1'>启用</Option>
                                <Option value='2'>停用</Option>
                            </Select>
                        </Form.Item>
                    )}


                    <Form.Item
                        label="上级商品类型"
                        name="pid"
                        style={{ width: '300px' }}
                        rules={[{ required: true, message: '请输入商品类型!' }]}
                    >
                        <ComTree changePid={changePid} pid={pid}></ComTree>
                    </Form.Item>

                </Form>
            </Drawer>
        </>
    );
};

export default AddAndUpdate;
